<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ChatGPT</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/@sentool/fetch-event-source/dist/index.min.js"></script>
</head>
<body class="bg-gray-100 text-gray-800">
<div class="max-w-4xl mx-auto p-6">
    <h1 class="text-4xl font-bold text-center mb-4">聊天响应流</h1>
    <div class="bg-white p-4 rounded-lg shadow-md">
        <h2 class="text-2xl font-semibold mb-4">用户输入：</h2>
        <input id="userText" type="text" class="w-full p-2 border rounded-lg mb-4" placeholder="请输入您的问题"
               value="hello"/>
        <button id="startButton" class="w-full bg-blue-500 text-white p-2 rounded-lg">开始聊天</button>
        <h2 class="text-2xl font-semibold mt-6 mb-4">聊天响应：</h2>
        <div id="chatOutput" class="h-60 overflow-y-scroll bg-gray-50 p-4 rounded-lg border border-gray-200"></div>
    </div>
</div>
​
<script>
    document.getElementById('startButton').addEventListener('click', async () => {
      const {fetchEventSource} = FetchEventSource;
      const userText = document.getElementById('userText');
      const chatOutput = document.getElementById('chatOutput');
      chatOutput.innerHTML = ''; // 清空聊天区域
      fetchEventSource("/ai/sseMemory", {
        method: 'POST',
        body: JSON.stringify({userText: userText.value}),
        headers: {
          'Content-Type': 'application/json'
         },
        onopen(response) {
          console.log('Request has been opened.');
         },
        onmessage(event) {
          if (event.data) {
            const data = event.data //这是一个json格式的字符串 包括metadata result results
            console.log('data', data);
            // 其他模型
            // console.log("data.content", data.result.output.content);
            // chatOutput.innerHTML += `${data.result.output.content}`;

            // DeepSeek
            console.log("data.content", data.result.output.text);
            chatOutput.innerHTML += `${data.result.output.text}`;
           }
         },
        onerror(error) {
          console.error('Error:', error);
         },
        done() {
          console.log('Stream has completed.');
         },
       });
     });
</script>
</body>
</html>
